<template>
    <div>
        <div>
            <el-config-provider :locale="zhCn"> <!--《:locale="zhCn 》设置语言-->

                <el-scrollbar height="70vh">
                    <!-- 我的考勤 -->
                    <el-row :gutter="24">
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="我的考勤" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>

                            </div>
                        </el-col>

                        <!--  -->
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="日期"
                                    label-position="top">
                                    <el-input placeholder="" :value="attendanceData.recordDate" style="width: 354px;"
                                        :disabled="!isEditing" />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="姓名"
                                    label-position="top">
                                    <el-input placeholder="" :value="attendanceData.username" style="width: 354px;"
                                        :disabled="!isEditing" />
                                </el-form-item>
                            </div>
                        </el-col>

                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="所在部门"
                                    label-position="top">
                                    <el-input placeholder="" :value="attendanceData.department" style="width: 354px;"
                                        :disabled="!isEditing" />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="归属考勤周期"
                                    label-position="top">
                                    <el-input placeholder="" :value="attendanceData.attendanceCycle" style="width: 354px;"
                                        :disabled="!isEditing" />
                                </el-form-item>
                            </div>
                        </el-col>

                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="上午签到状态"
                                    label-position="top">
                                    <el-input placeholder="" :value="attendanceData.morningStatus" style="width: 354px;"
                                        :disabled="!isEditing" />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="下午签到状态"
                                    label-position="top">
                                    <el-input placeholder="" :value="attendanceData.afternoonStatus" style="width: 354px;"
                                        :disabled="!isEditing" />
                                </el-form-item>
                            </div>
                        </el-col>

                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="上午打卡时间"
                                    label-position="top">
                                    <el-input placeholder="" :value="attendanceData.morningClock" style="width: 354px;"
                                        :disabled="!isEditing" />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="下午打卡时间"
                                    label-position="top">
                                    <el-input placeholder="" :value="attendanceData.afternoonClock" style="width: 354px;"
                                        :disabled="!isEditing" />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="迟到分钟数"
                                    label-position="top">
                                    <el-input placeholder="" :value="attendanceData.lateMinutes" style="width: 354px;"
                                        :disabled="!isEditing" />
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="早退分钟数"
                                    label-position="top">
                                    <el-input placeholder="" :value="attendanceData.earlyLeaveMinutes" style="width: 354px;"
                                        :disabled="!isEditing" />
                                </el-form-item>
                            </div>
                        </el-col>

                    </el-row>
                </el-scrollbar>

            </el-config-provider>
        </div>
    </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
    attendanceData: {
        type: Object,
        default: () => ({})
    }
});
</script>

<style scoped>
/* 外层容器，可控制整体条的高度、圆角等 */
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    /* 确保进度条容器宽度占满父容器 */
    overflow: hidden;
    /* 防止子元素溢出 */
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
    /* 添加宽度变化的过渡效果 */
}

.bottom-submit-bar {
    /* position: fixed; */
    /* 固定定位 */
    bottom: 0;
    /* 靠底部 */
    left: 0;
    width: 100%;
    background-color: #fff;
    /* 背景色，可根据需求调整 */
    border-top: 1px solid #eaeaea;
    /* 顶部边框，与页面区分 */
    padding: 12px 24px;
    /* 内边距，适配截图里的间距风格 */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* 按钮靠左，可根据实际需求调整 */
    z-index: 10;
    /* 提高层级，避免被其他内容覆盖 */
}
</style>